<template>
  <div>
  <van-nav-bar
    left-text=""
    right-text="搜索"
    left-arrow
    @click-right="onClickRight"
    @click-left="$router.back('/')"
    />

    <form action="/">
    <van-search
        v-model="value"
        left-arr
        right-text="搜索"
        placeholder="请输入搜索关键词"
       @click-right="onClickRight"
      @click-left="$router.back('/')"
    />
    </form>

    <!-- <van-nav-bar
    left-text=""
    right-text="搜索"
    left-arrow
    @click-right="onClickRight"
    @click-left="$router.back('/')"
    /> -->

    <van-swipe-cell >
    <van-cell :border="false" title="搜索历史" value="全部删除  完成" />
    <van-icon name="delete-o" class="delete"/>
    <van-divider />
    <van-cell :border="false" title="111" />
    <van-icon name="close" class="close"/>
    </van-swipe-cell>

  </div>
</template>

<script>
import { Search, Toast, Icon, SwipeCell ,Divider } from 'vant';
export default {
    data(){
        return{
            value:'',
            name:''
        }
    },
    components:{
        [Search.name]:Search,
        [Icon.name]:Icon,
        [ SwipeCell .name]: SwipeCell ,
        [ Divider  .name]: Divider 
    },
    methods:{
        onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('搜索');
    },
    }
}
</script>

<style lang="less">
// .aa p{
//     float: left;
//     margin-left: 20px;
// }

.delete{
    // float: right;
    padding-left: 340px;
}
.close{
    padding-left:340px ;
    top: -30px;
}
// .searchbox{
//   height: 32px;
//   width: 270px;
//   border: 1px solid;
//   background: rgb(247  255  247/50%);
//   border-radius: 20px;
//   margin-left: 50px;
  
//   align-items: center;
// }
</style>